<script lang="ts" setup>
import { getLazyOrgList, getOrgTree, create, update, del } from "@/api/system-api/org"
import { Orginfo } from "@/api/system-api/org/types/org"
import { OrgQuery } from "@/api/system-api/org/types/orgQuery"
import { useTableTreeDataMember, useDataDialogMember, useTreeMember } from "@/hooks/commonData/useCommonData"
import { onMounted, watch } from "vue"
import { Search, Plus, Delete, Edit, Pointer } from "@element-plus/icons-vue"
const listQuery = { page: 1, limit: 10 } as OrgQuery
const entity = {} as Orginfo
const {
  tableRef,
  tableDataRef,
  totalRef,
  tableLoadingRef,
  queryRef,
  getList,
  handleCurrentChange,
  handleSizeChange,
  load,
  reload
} = useTableTreeDataMember(listQuery, getLazyOrgList, ["id", "parentOrgId", "parentId"])
const {
  formRef,
  entityRef,
  dialogStatus,
  currentRef,
  getCurrent,
  submit,
  handleCreate,
  handleUpdate,
  handleDelete,
  handleDetail
} = useDataDialogMember(entity, create, update, del, [["id", "orgId"]], reload)
const { optionsRef, getTree } = useTreeMember(getOrgTree)
const rules = {
  orgName: [{ required: true, message: "请输入单位全称", trigger: "blur" }]
}
const optionProp = {
  value: "id",
  label: "orgName",
  children: "children"
}
watch(dialogStatus, (newVal: boolean) => {
  if (newVal) {
    getTree()
  }
})
onMounted(async () => {
  await getList()
})
</script>

<template>
  <div class="app-container">
    <el-row style="margin-bottom: 5px" :gutter="20">
      <el-col :span="6">
        <el-button type="primary" :icon="Search" @click="getList">搜索</el-button>
        <el-button type="primary" :icon="Plus" @click="handleCreate">新增</el-button>
      </el-col>
    </el-row>
    <el-card class="box-card" header="机构管理">
      <el-table
        ref="tableRef"
        v-loading="tableLoadingRef"
        :data="tableDataRef"
        border
        fit
        highlight-current-row
        stripe
        style="width: 100%"
        element-loading-text="给我一点时间"
        lazy
        row-key="id"
        :load="load"
      >
        <el-table-column label="单位名称" prop="orgName" show-overflow-tooltip />
        <el-table-column label="简称" prop="shortName" show-overflow-tooltip />
        <el-table-column label="备注" prop="remark" show-overflow-tooltip />
        <el-table-column label="操作" width="300">
          <template #default="scope">
            <el-button-group>
              <el-button type="primary" :icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
              <el-button type="info" :icon="Pointer" @click="handleDetail(scope.row)">详情</el-button>
              <el-button type="danger" :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center; margin-top: 15px">
        <el-pagination
          :current-page="queryRef.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="queryRef.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalRef"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="justify-content: center"
        />
      </div>
    </el-card>
    <el-dialog v-model="dialogStatus" :modal-append-to-body="false" :close-on-click-modal="false" :title="getCurrent()">
      <el-form ref="formRef" :model="entityRef" :rules="rules" label-width="110px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="单位名称" prop="orgName">
              <el-input v-model="entityRef.orgName" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上级单位">
              <el-tree-select
                :data="optionsRef"
                v-model="entityRef.parentOrgId"
                placeholder="请选择父级机构"
                :props="optionProp"
                :check-strictly="true"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="单位简称">
              <el-input v-model="entityRef.shortName" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="entityRef.remark" type="textarea" :rows="4" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="text-align: center; display: flex; justify-content: center">
          <el-button v-if="currentRef != 3" type="primary" @click="submit">提交</el-button>
          <el-button type="danger" @click="dialogStatus = false">取消</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<style scoped></style>
